<template>
   <div>
     <input v-model="userInfo.phoneNumber" type="text" placeholder="请输入11位手机号"><br>
     <input v-model="userInfo.password" type="text"  placeholder="请输入6-12位密码"><br>
     <div class="check">已有账户，<span>忘记密码?</span></div>
     <button @click="login">登录</button>
   </div>
</template>

<script>
/* eslint-disable import/newline-after-import,arrow-parens,no-console */

// import axios from 'axios';
// import http from '../http';
export default {
  name: 'login',
  data() {
    return {
      userInfo: {
        phoneNumber: '',
        password: '',
      },
    };
  },
  methods: {
    login() {
      this.$apis.login(this.userInfo)
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
  @function rem($px,$unit:75){
    @return $px/$unit#{rem}
    }
  input{
    margin:0 8%;
    height:rem(101);
    border:none;
    border-bottom: 1px solid #ddd;
    outline: none;
    padding-left: 4%;
    width:84%;
    font-size: rem(27);
    box-sizing: border-box;
    position: relative;
  }
  .check{
    color: #333;
   font-size: rem(24);
   margin:rem(34) 0 rem(92) 61.067%;
  }
  .check span{
    color: #2778e6;
  }
  button{
    width:74.4%;
    height: rem(81);
    margin:0 12.8%;
    background:#3d9dfc ;
    text-align: center;
    font-size: rem(32);
    color: #fff;
    border-radius: 38px;
    border:none;
    outline: none;
    display:block;
  }
</style>
